<!--
  - Licensed to the Apache Software Foundation (ASF) under one or more
  - contributor license agreements.  See the NOTICE file distributed with
  - this work for additional information regarding copyright ownership.
  - The ASF licenses this file to You under the Apache License, Version 2.0
  - (the "License"); you may not use this file except in compliance with
  - the License.  You may obtain a copy of the License at
  -
  -     http://www.apache.org/licenses/LICENSE-2.0
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->

<template>
  <el-row class="job-dashboard">
    <el-row :gutter="16" class="row">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ $t("elasticjob.historyDashboard.successAndFailCount") }}</span>
          </div>
          <el-row>
            <el-col :span="8" class="col">
              <h2>{{ $t("elasticjob.historyDashboard.jobInfoForOneMinute") }}</h2>
              <v-chart :options="lastMinute"/>
            </el-col>
            <el-col :span="8" class="col">
              <h2>{{ $t("elasticjob.historyDashboard.jobInfoForOneHour") }}</h2>
              <v-chart :options="lastHour"/>
            </el-col>
            <el-col :span="8" class="col">
              <h2>{{ $t("elasticjob.historyDashboard.jobInfoForOneWeek") }}</h2>
              <v-chart :options="lastWeek"/>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ $t("elasticjob.historyDashboard.jobType") }}</span>
          </div>
          <el-row>
            <el-col class="col">
              <h2>{{ $t("elasticjob.historyDashboard.jobExecutionTypeJob") }}</h2>
              <v-chart :options="executionType"/>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t("elasticjob.historyDashboard.successAndFailCount") }}</span>
        </div>
        <el-row>
          <v-chart :options="result"/>
        </el-row>
      </el-card>
    </el-row>
    <el-row class="row">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t("elasticjob.historyDashboard.jobTaskRunningCount") }}</span>
        </div>
        <el-row>
          <v-chart :options="running"/>
        </el-row>
      </el-card>
    </el-row>
    <el-row class="row">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t("elasticjob.historyDashboard.currentJobsCount") }}</span>
        </div>
        <el-row>
          <v-chart :options="register"/>
        </el-row>
      </el-card>
    </el-row>
  </el-row>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import moment from 'moment'

import API from './api'
export default {
  name: 'JobDashboard',
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      color: ['rgb(105, 167, 225)', 'rgb(120, 230, 117)'],
      lastMinute: {},
      lastHour: {},
      lastWeek: {},
      executionType: {},
      register: {},
      running: {},
      result: {}
    }
  },
  created() {
    this.getTasksPeriod()
    this.getJobsExecutionType()
    this.getJobsRegister()
    this.getJobsRunning()
    this.getTasksResults()
  },
  methods: {
    getTasksResults() {
      const params = {
        since: 'last24hours'
      }
      this.$$api_uds_getTasksResults({
        data: params,
        fn: json => {
          let res = json.data
          const series1 = []
          const series2 = []
          if (res.model && res.model.length) {
            res.model.forEach(item => {
              series1.push([moment(item.statisticsTime).format('HH:00'), item.successCount])
              series2.push([moment(item.statisticsTime).format('HH:00'), item.failedCount])
            })
          }
          this.result = {
            color: this.color,
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: [this.$t('elasticjob.historyDashboard').jobSuccessCount, this.$t('elasticjob.historyDashboard').jobFailureCount],
              bottom: 0
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '9%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: this.$t('elasticjob.historyDashboard').jobSuccessCount,
              type: 'line',
              data: series1
            }, {
              name: this.$t('elasticjob.historyDashboard').jobFailureCount,
              type: 'line',
              data: series2
            }]
          }
        }
      })

    },
    getJobsRunning() {
      const params = {
        since: 'lastWeek'
      }
      this.$$api_uds_getJobsRunning({
        data: params,
        fn: json => {
          let res = json.data
          this.$$api_uds_getTasksRunning({
            data: params,
            fn: json => {
              let resp = json.data
              if (resp.model && res.model.length) {
                const jobSeries = []
                const taskSeries = []
                if (res.model && res.model.length) {
                  res.model && res.model.forEach(item => {
                    jobSeries.push([moment(item.statisticsTime).format('MM-DD'), item.runningCount])
                  })
                }
                if (resp.model && resp.model.length) {
                  resp.model && resp.model.forEach(item => {
                    taskSeries.push([moment(item.statisticsTime).format('MM-DD'), item.runningCount])
                  })
                }
                this.running = {
                  color: this.color,
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {
                    data: [this.$t('elasticjob.historyDashboard').taskRunningCount, this.$t('elasticjob.historyDashboard').jobRunningCount],
                    bottom: 0
                  },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis: {
                    type: 'category',
                    boundaryGap: false
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [{
                    name: this.$t('elasticjob.historyDashboard').taskRunningCount,
                    type: 'line',
                    data: taskSeries
                  }, {
                    name: this.$t('elasticjob.historyDashboard').jobRunningCount,
                    type: 'line',
                    data: jobSeries
                  }]
                }
              }

            }
          })
        }
      })
    },
    getJobsRegister() {
      this.$$api_uds_getJobsRegister({
        data: {},
        fn: json => {
          let res = json.data
          const series = []
          if (res.model && res.model.length) {
            res.model && res.model.forEach(item => {
              series.push([moment(item.statisticsTime).format('HH:mm'), item.registeredCount])
            })
          }
          this.register = {
            color: this.color,
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: [this.$t('elasticjob.historyDashboard').currentJobsCount],
              bottom: 0
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: this.$t('elasticjob.historyDashboard').currentJobsCount,
              type: 'line',
              data: series
            }]
          }
        }
      })

    },
    getJobsExecutionType() {
      this.$$api_uds_getJobsExecutionType({
        data: {},
        fn: json => {
          let res = json.data
          const { model } = res
          this.executionType = {
            color: this.color,
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c}'
            },
            series: [
              {
                name: 'jobtype',
                type: 'pie',
                radius: '35%',
                center: ['50%', '50%'],
                data: [
                  { value: model.transientJobCount, name: 'TRANSI', label: { formatter: '{b}:\n' + this.percentage(model.transientJobCount, model.transientJobCount + model.daemonJobCount) }},
                  { value: model.daemonJobCount, name: 'DAEMON', label: { formatter: '{b}:\n' + this.percentage(model.daemonJobCount, model.transientJobCount + model.daemonJobCount) }}
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        }
      })

    },
    getTasksPeriod() {
      this.$$api_uds_getTasksPeriod({
        data: 'lastMinute',
        fn: json => {
          let res = json.data
          const { model } = res
          model.successCount = 40
          model.failedCount = 60
          this.lastMinute = {
            color: this.color,
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c}'
            },
            series: [
              {
                name: 'lastMinute',
                type: 'pie',
                radius: '35%',
                center: ['50%', '50%'],
                data: [
                  { value: model.successCount, name: this.$t('elasticjob.historyDashboard').success, label: { formatter: '{b}:\n' + this.percentage(model.successCount, model.successCount + model.failedCount) }},
                  { value: model.failedCount, name: this.$t('elasticjob.historyDashboard').failed, label: { formatter: '{b}:\n' + this.percentage(model.failedCount, model.successCount + model.failedCount) }}
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        }
      })

      this.$$api_uds_getTasksPeriod({
        data: 'lastHour',
        fn: json => {
          let res = json.data
          const { model } = res
          this.lastHour = {
            color: this.color,
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c}'
            },
            series: [
              {
                name: 'lastHour',
                type: 'pie',
                radius: '35%',
                center: ['50%', '50%'],
                data: [
                  { value: model.successCount, name: this.$t('elasticjob.historyDashboard').success, label: { formatter: '{b}:\n' + this.percentage(model.successCount, model.successCount + model.failedCount) }},
                  { value: model.failedCount, name: this.$t('elasticjob.historyDashboard').failed, label: { formatter: '{b}:\n' + this.percentage(model.failedCount, model.successCount + model.failedCount) }}
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        }
      })

      this.$$api_uds_getTasksPeriod({
        data: 'lastWeek',
        fn: json => {
          let res = json.data
          const { model } = res
          this.lastWeek = {
            color: this.color,
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c}'
            },
            series: [
              {
                name: 'lastWeek',
                type: 'pie',
                radius: '35%',
                center: ['50%', '50%'],
                data: [
                  { value: model.successCount, name: this.$t('elasticjob.historyDashboard').success, label: { formatter: '{b}:\n' + this.percentage(model.successCount, model.successCount + model.failedCount) }},
                  { value: model.failedCount, name: this.$t('elasticjob.historyDashboard').failed, label: { formatter: '{b}:\n' + this.percentage(model.failedCount, model.successCount + model.failedCount) }}
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        }
      })

    },
    percentage(value, count) {
      if (value === 0) {
        return '0.0%'
      }
      return Number((value / count) * 100).toFixed(1) + '%'
    }
  }
}
</script>

<style lang="scss" scoped>
.job-dashboard {
  padding: 0 16px;
  h2 {
    font-size: 14px;
  }
  .col {
    text-align: center;
  }
  .row {
    margin-top: 16px;
  }
}
.echarts {
  height: 300px;
  width: 100%;
}
</style>
